<template>
  <div class="like">
    <Card>
      <span>猜你喜欢</span>
    </Card>
    <ul>
      <li 
        v-for="item in likeList" 
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <h2>
          <img v-lazy="item.imgUrl" alt="">
        </h2>
        <h3>{{item.name}}</h3>
        <div>
          <span>￥</span>
          <b>{{item.price}}</b>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Card from '@/components/home/Card.vue'
export default {
  components: { Card },
  props:{
    likeList:Array
  },
  data() {
    return {
      
    }
  },
  methods:{
    // 跳转商品详情页
    goDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id:id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.like ul{
  display: flex;
  flex-wrap:wrap;
}
.like ul li{
  width:50%;
  display: flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.like h3{
  width:93%;
  font-weight:400;
  font-size:0.373333rem;
  color:#222;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.like img{
  width:4.693333rem;
  height:4.69333rem;
}
.like image[lazy=loading] {
  background-color: red;
}
.like ul li>div{
  width: 93%;
  // padding: 0.16rem;
  text-align: left;
  color:#f00;
}
.like ul li>div span{
  font-size: 0.35rem;
}
.like ul li>div b{
  font-weight: 600;
  font-size: 0.426666rem;
  
}
</style>